<template>
  <el-card class="mb-20">
    <template #header>
      <span>基本信息配置</span>
    </template>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="任务名称" prop="task_name">
          <el-input v-model="form.task_name" placeholder="请输入任务名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="任务状态" prop="status">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="禁用"
          />
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="数据源" prop="db_info_setting_id">
          <el-select 
            v-model="form.db_info_setting_id" 
            placeholder="请选择数据源" 
            style="width: 100%"
            @change="handleDataSourceChange"
          >
            <el-option 
              v-for="item in dataSourceOptions" 
              :key="item._id" 
              :label="item.connection_name" 
              :value="item._id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="目标表名" prop="table_name">
          <el-select
            v-model="form.table_name"
            placeholder="请选择目标表名"
            style="width: 100%"
            filterable
            :disabled="!form.db_info_setting_id"
            @change="handleTableChange"
          >
            <el-option
              v-for="table in tableOptions"
              :key="table"
              :label="table"
              :value="table"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="数据条件" prop="query_condition">
          <el-input 
            v-model="form.query_condition" 
            placeholder="请输入查询条件，例如: id > 100 AND name LIKE '%test%'" 
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数据量限制" prop="data_limit">
          <el-input-number 
            v-model="form.data_limit" 
            :min="0" 
            placeholder="不填写则不限制" 
            style="width: 100%"
            :controls="false"
          />
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="Cron表达式" prop="cron_expression">
          <el-input 
            v-model="form.cron_expression" 
            placeholder="请输入Cron表达式，例如: 0 0 * * * ? (每天0点执行)"
          >
            <template #append>
              <el-tooltip content="Cron表达式格式: 秒 分 时 日 月 周 [年]">
                <el-button>?</el-button>
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { fetchTables, filterTableSuggestions } from '../form-utils';

// 定义props
const props = defineProps({
  form: {
    type: Object,
    required: true
  },
  dataSourceOptions: {
    type: Array,
    default: () => []
  },
  tableOptions: {
    type: Array,
    default: () => []
  }
});

// 定义事件
const emit = defineEmits([
  'update:tableOptions', 
  'fetch-columns', 
  'reset-columns'
]);

// 数据源变更事件
const handleDataSourceChange = async (val: string) => {
  // 清空表名和列
  props.form.table_name = '';
  emit('reset-columns');
  
  // 如果有数据源ID，获取表列表
  if (val) {
    const tables = await fetchTables(val);
    emit('update:tableOptions', tables);
  }
};

// 表名变更事件
const handleTableChange = (val: string) => {
  // 清空列
  emit('reset-columns');
  
  // 获取列
  if (props.form.db_info_setting_id && val) {
    emit('fetch-columns', props.form.db_info_setting_id, val);
  }
};
</script>

<style scoped>
.mb-20 {
  margin-bottom: 20px;
}
</style>